<template>
  <view class="chat-apply">
  	<view class="apply-card">
  		<view class="applytitle">
  			<view>审批</view>
  		</view>
  
  		<view class="apply-header" style="padding:0 5px;">
  			<view class="apply-title">{{ JSON.parse(detail.content).title }}</view>
  		</view>
  
  		<view class="apply-detail" style="padding:0 5px;">
  			<view v-for="(d, idx) in JSON.parse(detail.content).detail" :key="idx"
  				class="apply-detail-item">
  				<text class="label">{{ d.label }}：</text>
  				<text class="value">{{ truncateValue(d.value, 4) }}</text>
  			</view>
  		</view>
  
  		<view class="apply-footer" @click="viewApplyDetail(JSON.parse(detail.content).apply_id)">
  			查看详情
  		</view>
  	</view>
  </view>
</template>

<script>
import { chatApi } from '@/apis/cloud/chat'

export default {
  name: 'ApplyItem',
  props: {
		detail: {
			type: Object,
			required: true
		},
  },
  data() {
		return {

		}
	},
	methods: {
		truncateValue(text, maxLines = 4) {
		  const lineCharCount = 19;
		  const maxLength = lineCharCount * maxLines;
		  if (text === null || text === undefined) return '';
		  const str = String(text);
		  if (str.length <= maxLength) return str;
		  return str.slice(0, maxLength) + '...';
		},
		viewApplyDetail (id) {
			uni.navigateTo({
				url: `/pages/apply/oaList/applyOrderDetail?id=${id}`
			})
		},
  }
};
</script>

<style lang="scss" scoped>
	@import "../../config/global.scss";
.chat-apply .apply-card {
  background-color: #ffffff;
	border: 1px solid #e0e0e0;
  width: 450rpx;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.apply-card{
	background-color: #ffffff;
	padding: 2px;
	border-radius: 10px;
}

.applytitle {
	display: flex;
	font-weight: 600;
	background-color: #fff2e0;
	margin-bottom: 1px;
	padding: 8px;
	border-radius: 10px 10px 0px 0px;
	color: #fd9100;
}

.apply-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.apply-title {
	flex: 1;
	font-size: 16px;
	font-weight: 600;
	color: #333;
}

.apply-status {
	margin-top: -2rpx;
	text-align: center;
	max-width: 120rpx !important;
	min-width: 100rpx !important;
	margin-left: 12rpx;
	font-size: 12px;
	font-weight: 500;
	border-radius: 8px;
	color: #fff;
}

/* 审批状态：0 待提交 / 待处理 */
.applystatus-0 {
	color: #ff9800;
	border: 1px solid #ff9800;
}

/* 审批状态：1 审核中 */
.applystatus-1 {
	color: #2196f3;
	border: 1px solid #2196f3;
}

/* 审批状态：2 已通过 */
.applystatus-2 {
	color: #4caf50;
	border: 1px solid #4caf50;
}

/* 审批状态：3 已驳回 */
.applystatus-3 {
	color: #f44336;
	border: 1px solid #f44336;
}

/* 审批状态：4 已撤销 */
.applystatus-4 {
	color: #9e9e9e;
	border: 1px solid #9e9e9e;
}

.apply-detail-item {
 display: block;
  margin-bottom: 8px;
}

.apply-detail-item .label {
 font-weight: 500;
  color: #666;
}

.apply-detail-item .value {
  display: inline;
  word-break: break-word;
  white-space: pre-wrap; /* 保留换行 */
  color: #333;
  text-overflow: ellipsis;
}

.apply-footer {
	margin: 0 auto;
	width: 100%;
	background-color: #f3f3f4;
	margin-top: 10px;
	text-align: center;
	font-size: 28rpx;
	color: #0066ff;
	padding: 6px 0;
	border-radius: 8px;
	cursor: pointer;
	user-select: none;
	font-weight: 700;
}
</style>
